<template>
  <div class="table">
    <div class="item"
         v-for="item in data"
         :key="item.id">
      <div class="col">
        <div class="label"
             style="width:260px">船期编号：{{item.id}}</div>
        <div class="value withimg">
          <div>
            <img src="@/assets/images/mt.png">
            <el-tooltip :content="item.termName"
                      placement="bottom" popper-class="testtooltip">
                <span>{{ item.termName | subStr(5) }}</span>
            </el-tooltip>
          </div>
          <el-tooltip :content="item.ivoyageName"
                      placement="bottom"
                      popper-class="testtooltip">
            <span>{{item.ivoyageName|subStr(14)}}</span>
          </el-tooltip>
        </div>
      </div>
      <div class="col">
        <div class="label"
             style="width:110px">状态</div>
        <div class="value">
          <el-tooltip :content="item.checkRemark"
                      placement="bottom"
                      popper-class="testtooltip" v-if="['2','4'].includes(item.checkStatus)">
              <span class="withback"
                :style="{color:colors[item.checkStatus].color,background:colors[item.checkStatus].background}">{{item.checkStatusName}}</span>
          </el-tooltip>
          <span class="withback" v-else
                :style="{color:colors[item.checkStatus].color,background:colors[item.checkStatus].background}">{{item.checkStatusName}}</span>
        </div>
        
      </div>
      <div class="col">
        <div class="label"
             style="width:200px">进/出口航次</div>
        <!-- <div class="value">{{item.ivoyage}}/{{item.evoyage}}</div> -->
         <el-tooltip :content="item.ivoyage+'/'+item.evoyage"
                      placement="bottom"
                      popper-class="testtooltip">
            <span class="value">{{((item.ivoyage || '--')+'/'+(item.evoyage || '--'))|subStr(18)}}</span>
          </el-tooltip>
      </div>
      <div class="col">
        <div class="label">计划抵港时间</div>
        <div class="value">{{item.eta}}</div>
      </div>
      <div class="col">
        <div class="label">计划离港时间</div>
        <div class="value">{{item.etd}}</div>
      </div>
      <div class="col">
        <div class="label"
             style="width:100px">内外贸</div>
        <div class="value">{{item.intradeName}}</div>
      </div>
      <div class="col">
        <div class="label">船期类型</div>
        <div class="value">{{item.scdType=='CONTAINER'?'集装箱':item.scdType=='BULK_CARGO'?'件散货':''}}</div>
      </div>
      <div class="col">
        <div class="label">船舶类型</div>
        <div class="value">{{item.vtpcodeName}}</div>
      </div>
      <div class="col">
        <div class="label"
             style="width:100px">运营人航线</div>
          <el-tooltip :content="item.slnIdName"
                      placement="bottom"
                      popper-class="testtooltip">
            <span class="value">{{item.slnIdName|subStr(5)}}</span>
          </el-tooltip>
      </div>
      <div class="col">
        <div class="label"
             style="width:200px">船公司</div>
             <el-tooltip :content="item.cstShippinglineName"
                      placement="bottom"
                      popper-class="testtooltip">
            <span class="value">{{item.cstShippinglineName|subStr(10)}}</span>
          </el-tooltip>     
      </div>
      <div class="col">
        <div class="label"
             style="width:200px"></div>
        <div class="value"></div>
      </div>
      <div class="col fixed">
        <div class="label"
             style="width:220px">操作</div>
        <div class="value btns">
          <el-button @click="edit(item,'look')"
                     type="text"
                     style="color: #1955CF">查看</el-button>
          <el-button v-if="item.checkStatus=='3'"
                     @click="cancel(item.id)"
                     type="text"
                     style="color: #1955CF">取消</el-button>
          <template v-if="item.checkStatus=='2'||item.checkStatus=='4'">
            <el-button @click="edit(item)"
                       type="text"
                       style="color: #1955CF">编辑</el-button>
            <el-button type="text"
                       style="color:  #eb2a2a"
                       @click="del(item.id)">删除</el-button>
          </template>
          <el-button v-if="(item.checkStatus=='3'||item.checkStatus=='6'||item.checkStatus=='7') && item.scdType=='CONTAINER' && item.ivoyage"
                     @click="toLoadList(item,'unloadList')"
                     type="text"
                     style="color: #DA9A05">卸船清单</el-button>
          <el-button v-if="(item.checkStatus=='3'||item.checkStatus=='6'||item.checkStatus=='7' ) && item.scdType=='CONTAINER' && item.evoyage"
                     @click="toLoadList(item,'loadList')"
                     type="text"
                     style="color: #DA9A05">装船清单</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'myTable',
  props: ['data'],
  components: {},
  data() {
    return {
      colors: [
        { color: '#333333', background: '#F4F4F5' },
        { color: '#67C23A', background: '#F0F9EB' },
        { color: '#0F47B8', background: '#ECF5FF' },
        { color: '#FF3838', background: '#FEF0F0' },
        { color: '#0F47B8', background: '#ECF5FF' },
        { color: '#FF3838', background: '#FEF0F0' },
        { color: '#333333', background: '#F4F4F5' },
        { color: '#333333', background: '#F4F4F5' },
        { color: '#67C23A', background: '#F0F9EB' },
        { color: '#FF3838', background: '#FEF0F0' },
        { color: '#333333', background: '#F4F4F5' },
      ],
    }
  },

  methods: {
    edit(item, v) {
      let name = item.scdType == 'CONTAINER' ? 'addContainer' : 'addBulk'
      let par = {
        name: name,
        query: {
          id: item.id,
          type: v,
        },
      }
      if (v == 'look') {
        let { href } = this.$router.resolve(par)
        window.open(href, '_blank')
      } else {
        this.$router.push(par)
      }
    },
    del(id) {
      this.$emit('del', id)
    },
    cancel(id) {
      this.$confirm('此操作将取消船期, 是否继续?', '提示')
        .then(() => {
          this.$api.cancelSchedules({ id }).then((res) => {
            this.$message.success('取消成功')
            this.find()
          })
        })
        .catch(() => {})
    },
    //校验
    toLoadList(row, type) {
      this.$router.push({
        name: type,
        query: { id: row.id },
      })
    },
  },

  computed: {},

  mounted() {},
}
</script>
<style lang='scss' scoped>
.table {
  overflow-x: scroll;
}
.item {
  display: flex;
  margin-top: 20px;
  width: auto;
  padding-right: 300px;

  .col {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    .label {
      height: 33px;
      background: #f5f5f5;
      font-size: 14px;
      font-family: PingFang SC-Regular-Regular, PingFang SC-Regular;
      font-weight: 400;
      color: #333333;
      display: flex;
      align-items: center;
      padding: 0 10px;
      box-sizing: border-box;
    }
    .value {
      height: 70px;
      border: 1px solid #e5e5e5;
      border-left: 0;
      display: flex;
      align-items: center;
      padding: 10px;
      box-sizing: border-box;
      font-size: 14px;
      font-family: PingFang SC-Regular-Regular, PingFang SC-Regular;
      font-weight: 400;
      color: #000000;
    }
    .btns {
      display: flex;
      align-items: center;
      button {
        font-size: 14px;
        margin-left: 5px;
      }
    }
    img {
      width: 30px;
      height: 27.95px;
    }
    .withimg {
      div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
      }
    }
    .withback {
      padding: 0 10px;
      height: 24px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .fixed {
    position: absolute;
    right: 14px;
    border-left: 1px solid #ebeef5;
    box-shadow: -3px 0px 10px #ebeef5;
    background-color: #fff;
  }
}
.circle {
  display: flex;
  align-items: center;
  span:first-child {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
  }
}
</style>